/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState, useEffect } from "react";
import Header from "@/components/Header";
import {
  Input,
  Select,
  Table,
  Button,
  TableColumnsType,
  Form,
  Modal,
  Tag,
  DatePicker,
  Space,
} from "antd";

import "./insurance.scss";
import axios from "axios";
import moment from "moment";

// 内容
interface DataType {
  key: React.Key;
  image: string;
  vname: string;
  platenumber: string;
  name: string;
  vstatus: number;
  annualInsuranceDate: string;
}
const { Search } = Input;
type SizeType = Parameters<typeof Form>[0]["size"];
export default function Insurance() {
  const [data, setData] = useState<DataType[]>([]);
  //对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  //对话框中的表单数据
  const [form] = Form.useForm();
  const showModal = (e: any) => {
    setIsModalOpen(true);
    form.setFieldsValue(e);
  };
  //点击确定
  const handleOk = () => {
    setIsModalOpen(false);
    const newData = form.getFieldsValue();
    axios
      .post("http://localhost:3100/cyp/update", newData)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
    show;
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [componentSize, setComponentSize] = useState<SizeType | "default">(
    "default"
  );
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };

  const columns: TableColumnsType<DataType> = [
    {
      title: "车型/照片",
      width: 220,
      dataIndex: "image",
      key: "veid",
      render: (imageUrl: string, record: { vname: any }) => {
        const description = record.vname;
        const imageUrlWithSlash = imageUrl.replace(/\/upload/, "/upload/");
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            <img
              src={imageUrlWithSlash}
              alt="车型照片"
              style={{
                maxWidth: "90px",
                maxHeight: "100px",
                borderRadius: "5px",
                marginLeft: "10px",
                marginRight: "10px",
              }}
            />
            <p className="text">{description}</p>
          </div>
        );
      },
    },
    {
      title: "车牌",
      width: 150,
      dataIndex: "platenumber",
      key: "platenumber",
    },
    {
      title: "所在门店",
      dataIndex: "name",
      key: "name",
      width: 150,
    },
    {
      title: "运营状态",
      dataIndex: "vstatus",
      key: "vstatus",
      width: 150,
      render: (_: any, { vstatus }: any) => {
        return vstatus === 1 ? (
          <Tag color="green">租凭中</Tag>
        ) : (
          <Tag color="red">未租凭</Tag>
        );
      },
    },
    {
      title: "保险到期日期",
      dataIndex: "annualInsuranceDate",
      key: "annualInsuranceDate",
      width: 150,
      render: (date: moment.MomentInput) => {
        return moment(date).format("YYYY年-MM月-DD日");
      },
    },
    {
      title: "操作",
      key: "operation",
      fixed: "right",
      width: 110,
      render: (e: any) => {
        return (
          <div>
            <Button
              type="primary"
              style={{ marginBottom: "5px" }}
              onClick={() => showModal(e)}
            >
              修改信息
            </Button>
          </div>
        );
      },
    },
  ];
  //搜索车型
  const onSearch = async (value: string) => {
    if (value !== "") {
      console.log(value, "搜索");

      // setSearchName(value);
      const { data } = await axios.get(
        "http://127.0.0.1:3100/cyp/index?name=" + value
      );
      if (data.code === 200) {
        setData(data.data);
      }
    } else {
      const { data } = await axios.get("http://127.0.0.1:3100/cyp/index");
      if (data.code === 200) {
        setData(data.data);
      }
    }
  };
  //从后端获取数据
  const show = () => {
    axios.get("http://localhost:3100/cyp/index").then((res) => {
      setData(() => {
        return res.data.data.map((item: { veid: unknown }) => {
          return { ...item, key: item.veid };
        });
      });
    });
  };
  useEffect(() => {
    show();
  }, []);
  return (
    <div className="storeBigBox">
      <Header title="保险到期车辆" />
      <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        layout="inline"
        initialValues={{ size: componentSize }}
        onValuesChange={onFormLayoutChange}
        size={componentSize as SizeType}
        style={{ marginTop: "5px" }}
      >
        <Form.Item label="搜索车型" style={{ width: "300px" }}>
          <Search
            placeholder="请输入内容"
            onSearch={onSearch}
            style={{
              width: 200,
            }}
          />
        </Form.Item>
        <Form.Item label="车牌号" style={{ width: "300px" }}>
          <Input placeholder="请输入内容" />
        </Form.Item>
        <Form.Item label="所属门店" style={{ width: "300px" }}>
          <Select placeholder="请选择门店">
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
      </Form>
      <Modal
        title="修改信息"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          layout="inline"
          initialValues={{ size: componentSize }}
          onValuesChange={onFormLayoutChange}
          size={componentSize as SizeType}
          form={form}
        >
          <Form.Item label="车辆编号" name="veid">
            <Input disabled />
          </Form.Item>
          <Form.Item label="车型" name="vname">
            <Input />
          </Form.Item>
          <Form.Item label="车牌号" name="platenumber">
            <Input />
          </Form.Item>
          <Form.Item label="所属门店" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="运营状态" name="vstatus">
            <Input />
          </Form.Item>
          <Form.Item label="保险到期日期" name="annualInsuranceDate">
            <Space direction="vertical">
              <DatePicker />
            </Space>
          </Form.Item>
        </Form>
      </Modal>
      <div className="storeContent">
        <Table columns={columns} dataSource={data} scroll={{ y: 350 }} />
      </div>
    </div>
  );
}
